<script>
export default {
  name: 'imageLoader',
  data() {
    return {
      isLoaded: false,//加载完成
      isEveryFin: false //全部事情完成
    }
  },
  computed: {
    isOpacity() {
      return this.isLoaded ? 1 : 0
    }
  },
  props: {
    // 原始图片的路径
    src: {
      type: String,
      required: true
    },
    // 原始图片加载完成前的占位图片
    placeholder: {
      type: String,
      required: true
    },
    // 原始图片加载完成后，切换到原始图经过的毫秒数
    duration: {
      type: Number,
      default: 500
    }
  },
  methods: {
    handLoad() {
      this.isLoaded = true
      setTimeout(() => {
        this.isEveryFin = true
        this.$emit('load')
      }, this.duration)
    }
  }
}
</script>



<template>
  <div class="imager-loader-container">
    <img v-if="!isEveryFin" class="placeholder" :src="placeholder" alt="">
    <img class="origin" :src="src" alt="" :style="{ opacity: isOpacity, transition: duration + 'ms' }" @load="handLoad">
  </div>
</template>



<style lang='less' scoped>
@import '../../styles/mixin.less';

.imager-loader-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 1px solid;

  img {
    .self-fill();
    object-fit: cover;
  }

  .placeholder {
    filter: blur(1vw);
  }
}
</style>